<template>
    <!-- <tabbar>
        <tabbar-item :selected="selected === 'home'" is-link link="/home">
            <i slot="icon" class="iconfont icon-shouye"></i>
            <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :selected="selected === 'dataCenter'" is-link link="/dataCenter">
            <i slot="icon" class="iconfont icon-shujuzhongxin"></i>
            <span slot="label">数据中心</span>
        </tabbar-item>
        <tabbar-item :selected="selected === 'detail'" is-link link="/detail">
            <i slot="icon" class="iconfont icon-dingdan3"></i>
            <span slot="label">订单管理</span>
        </tabbar-item>
        <tabbar-item :selected="selected === 'my'" is-link link="/my">
            <i slot="icon" class="iconfont icon-wo"></i>
            <span slot="label">我的</span>
        </tabbar-item>
    </tabbar> -->
    <mu-menu class="disflex" fixed position="bottom" :selected="selected">
        <mu-menu-item class="flex" index="/" link="/">
            <div v-show="!home">
                <div>
                    <i class="iconfont icon-home"></i>
                </div>
                <span>首页</span>
            </div>
            <div v-show="home">
                <div>
                    <i class="iconfont icon-homefill"></i>
                </div>
                <span>首页</span>
            </div>
        </mu-menu-item>
        <mu-menu-item class="flex" index="dataCenter" link="/dataCenter">
            <div v-show="!dataCenter">
                <div>
                    <i class="iconfont icon-rank"></i>
                </div>
                <span>数据中心</span>
            </div>
            <div v-show="dataCenter">
                <div>
                    <i class="iconfont icon-rankfill"></i>
                </div>
                <span>数据中心</span>
            </div>
        </mu-menu-item>
        <mu-menu-item class="flex" index="detail" link="/detail">
            <div v-show="!detail">
                <div>
                    <i class="iconfont icon-form"></i>
                </div>
                <span>订单管理</span>
            </div>
            <div v-show="detail">
                <div>
                    <i class="iconfont icon-formfill"></i>
                </div>
                <span>订单管理</span>
            </div>
        </mu-menu-item>
        <mu-menu-item class="flex" index="my" link="/my">
            <div v-show="!my">
                <div>
                    <i class="iconfont icon-my"></i>
                </div>
                <span>我的</span>
            </div>
            <div v-show="my">
                <div>
                    <i class="iconfont icon-myfill"></i>
                </div>
                <span>我的</span>
            </div>
        </mu-menu-item>
    </mu-menu>
</template>

<script>
    import {
        Menu,
        MenuItem
    } from 'muka-ui'
    export default {
        name: 'bar',
        data: function () {
            return {
                'home': false,
                'dataCenter': false,
                'detail': false,
                'my': false,
                view: ''
            }
        },
        components: {
            'mu-menu': Menu,
            'mu-menu-item': MenuItem
        },
        props: {
            selected: {
                type: String,
                default: 'home'
            }
        },
        created: function () {
            if (this.selected === '/') {
                this.home = this.selected
            } else {
                this[this.selected] = this.selected
            }
        }
    }

</script>

<style lang="less">
    .disflex {
        height: 50px;
        display: flex;
        background: #fcfcfc;
        border-top: 1px solid #D9D9D9;
        .mu-menu-item-active {
            color: #44b549;
        }
    }

    .flex {
        text-align: center;
        flex: 1;
        padding: 0;
        line-height: 14px;
        color: #8b8b8b;
        span {
            font-size: 12px;
            position: relative;
            top: -10px;
        }
        div {
            margin-top: 5px;
            line-height: 25px;
            i {
                font-size: 36px;
            }
        }
        .iconfont {
            font-size: 22px;
        }
    }

</style>
